<%--
  Created by IntelliJ IDEA.
  User: Somnus远哥
  Date: 2021/9/18
  Time: 9:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <title>管理员信息详情</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <link rel="stylesheet" href="../css/bootstrap-responsive.css"/>
    <link rel="stylesheet" href="../css/styles.css"/>
    <link rel="stylesheet" href="../css/toastr.css"/>
    <link rel="stylesheet" href="../css/fullcalendar.css"/>
    <style>
        .error_msg{
            color:red;
        }
    </style>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/jquery.knob.js"></script>
    <script src="../js/d3.v3.min.js"></script>
    <script src="../js/toastr.js"></script>
    <script src="../js/jquery.tablesorter.min.js"></script>
    <script src="../js/jquery.peity.min.js"></script>
    <script src="../js/fullcalendar.min.js"></script>
    <script src="../js/gcal.js"></script>
    <script src="../js/setup.js"></script>

</head>
<body>
<!-- header部分 -->
<%@include file="../header.jsp"%>
<div class="page">
    <div class="page-container">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <h4 class="header">管理员信息</h4>
                    <form action="update" method="post">
                        <table class="table table-striped sortable">
                            <thead>
                            </thead>
                            <tbody>
                            <tr>
                                <th>管理员名</th>

                                <td>
                                    <input type="hidden" name="id" value="${admin.id}"/>
                                    <input type="text" name="name" value="${admin.name}" readonly /><span class="error"></span></td>
                            </tr>
                            <tr>
                                <th>原始密码</th>
                                <td><input type="password" name="originPassword" placeholder="请输入原密码"/></td>
                            </tr>
                            <tr>
                                <th>新密码</th>
                                <td><input id="newPassword" type="password" name="newPassword" placeholder="英文开头，首字母大写，8~16位"/> <span id="msg" class="error_msg"></span></td>
                            </tr>
                            <tr>
                                <th>确认新密码</th>
                                <td><input id="confirmNewPassword" type="password" placeholder="请再次确认密码"/><span id="error_msg" class="error_msg"></span></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><input id="update" class="btn btn-success" type="submit"
                                           value="更新" disabled="disabled"/>&nbsp;&nbsp;&nbsp;<input class="btn btn-danger"
                                                                                 type="reset" value="重置" /></td>
                            </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="../footer.jsp"%>
<script>
    $(function () {
        let confirm1 = false;
        let confirm2 = false;
        $('#newPassword').blur(function () {
            let pwd1 = $("#newPassword").val();
            // 密码以大写字母开头，8~16位
            let regExp = /^[A-Z]\w{7,15}$/;
            if(regExp.test(pwd1)){
                $("#msg").html("密码可以使用");
                confirm1 = true;
            }else{
                $("#msg").html("密码不符合规范");
            }
        })
        // 触发两次密码比对的事件
        $('#confirmNewPassword').bind('input propertychange',function () {

            let pwd1 = $('#newPassword').val();
            let pwd2 = $('#confirmNewPassword').val();
            if(pwd1 !== pwd2){
                $('#error_msg').html('两次密码不一致');
            }else{
                $('#error_msg').html('');
                confirm2 = true;
            }
        })

        $("input").bind('input propertychange',function () {
            if (confirm1 && confirm2) {
                $("input[type='submit']").removeAttr("disabled");
            } else {
                console.log(confirm1)
                console.log(confirm2)
                $("input[type='submit']").attr("disabled", "");
            }
        });
    })
</script>
</body>
<script src="../js/d3-setup.js"></script>
</html>
